<template>
  <div>
    <div class="root">
      <a-space :size="12" style="margin-bottom: 10px">
        <a-select
          ref="select"
          v-model:value="page.class_name"
          placeholder="图书分类"
          style="width: 120px"
          @change="init()"
        >
          <a-select-option value="%%">全部</a-select-option>
          <a-select-option
            v-for="c in tagsAndClasses.classListEntity"
            v-bind:key="c.class_id"
            :value="c.class_name"
            >{{ c.class_name }}</a-select-option
          >
        </a-select>
        <a-select
          ref="select"
          v-model:value="page.label_name"
          placeholder="图书标签"
          style="width: 120px"
          @change="init()"
        >
          <a-select-option value="%%">全部</a-select-option>
          <a-select-option
            v-for="t in tagsAndClasses.labelListEntity"
            v-bind:key="t.label_id"
            :value="t.label_name"
            >{{ t.label_name }}</a-select-option
          >
        </a-select>
        <a-input-group compact>
          <a-select
            v-model:value="searchValue.id"
            placeholder="选择搜索内容"
            style="width: 150px"
          >
            <a-select-option value="0">书 名</a-select-option>
            <a-select-option value="1">作 者</a-select-option>
            <a-select-option value="2">I S B N</a-select-option>
          </a-select>
          <a-input-search
            v-model:value="searchValue.info"
            placeholder="输入搜索信息"
            style="width: 200px"
            enter-button
            @search="onSearch"
          />
        </a-input-group>
      </a-space>
      <a-row class="cardRow">
        <a-col :span="4" v-for="book in list" v-bind:key="book.book_id">
          <a-card class="card" hoverable>
            <template #cover>
              <a-carousel :after-change="onChange" arrows>
                <template #prevArrow>
                  <div
                    class="custom-slick-arrow"
                    style="left: 10px; z-index: 1"
                  >
                    <LeftOutlined />
                  </div>
                </template>
                <template #nextArrow>
                  <div class="custom-slick-arrow" style="right: 10px">
                    <RightOutlined />
                  </div>
                </template>
                <div v-for="f in book.fileList" v-bind:key="f.file_id">
                  <a-image
                    :src="'http://' + f.file_url"
                    height="300px"
                    width="100%"
                    style="overflow: hidden; object-fit: cover"
                  />
                </div>
              </a-carousel>
            </template>
            <template #actions>
              <a-button
                type="text"
                @click="
                  openLeft(
                    book.bookBaseInfo.book_id,
                    book.bookBaseInfo.current_num == 0
                  )
                "
                >{{
                  book.bookBaseInfo.current_num == 0 ? "预 约" : "借 阅"
                }}</a-button
              >
              <a-button type="text" @click="openBookDetail(book)"
                >详 情</a-button
              >
            </template>
            <a-card-meta
              :title="book.bookBaseInfo.book_name"
              @click="openBookDetail(book)"
            >
              <template #description>
                <p class="cart-text">
                  <a-tag
                    v-for="t in book.labelList"
                    v-bind:key="t.label_id"
                    :bordered="false"
                    color="blue"
                    >{{ t.label_name }}</a-tag
                  >
                </p>
                <p class="cart-text">
                  <span>简 &nbsp; 介：</span>{{ book.bookBaseInfo.info }}
                </p>
                <p class="cart-text">
                  <span> 作 &nbsp; 者：</span>
                  <span v-for="a in book.authorList" v-bind:key="a.author_id"
                    >{{ a.author_name }} &nbsp;</span
                  >
                </p>
                <p class="cart-text">
                  <span>库存数：</span>{{ book.bookBaseInfo.current_num }} 本
                </p>
                <p><span>图书类别：</span>{{ book.book_class }}</p>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
      <a-pagination
        class="pagination"
        v-model:current="page.pageNum"
        v-model:pageSize="page.pageSize"
        @change="init()"
        :total="pageParam.total"
      />
    </div>
    <div class="root-model">
      <a-modal
        v-model:open="openDetail"
        :title="bookDetail.bookBaseInfo.book_name"
        v-if="bookDetail != null"
      >
        <template #footer>
          <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="closeBookDetail"
            >确 &nbsp; 定</a-button
          >
        </template>
        <p>
          <a-tag
            v-for="t in bookDetail.labelList"
            v-bind:key="t.label_id"
            :bordered="false"
            color="blue"
            >{{ t.label_name }}</a-tag
          >
        </p>
        <p><span>简 &nbsp; 介：</span>{{ bookDetail.bookBaseInfo.info }}</p>
        <p>
          <span>作 &nbsp; 者：</span>
          <span v-for="a in bookDetail.authorList" v-bind:key="a.author_id"
            >{{ a.author_name }} &nbsp;</span
          >
        </p>
        <p><span>英文名：</span>{{ bookDetail.bookBaseInfo.book_code }}</p>
        <p><span>库存数：</span>{{ bookDetail.bookBaseInfo.current_num }} 本</p>
        <p><span>图书类别：</span>{{ bookDetail.book_class }}</p>
        <p>
          <span>I&nbsp;S&nbsp;B&nbsp;N：</span>
          {{ bookDetail.bookBaseInfo.isbn }}
        </p>
        <p><span>总共库存：</span>{{ bookDetail.bookBaseInfo.total_num }} 本</p>
        <p><span>出版时间：</span>{{ bookDetail.bookBaseInfo.publi_time }}</p>
        <p>
          <span>平均评分：</span>
          <a-rate v-model:value="bookDetail.rate" allow-half disabled />
          <span>&nbsp; {{ bookDetail.rate }}</span>
        </p>
      </a-modal>
      <a-modal
        v-model:open="openBorrow"
        title="你确定要借阅这本书吗？"
        @ok="borrowBook"
        @cancel="closeBorrowBook"
      >
        <p>
          <a-typography-text type="secondary"
            >最多只能借90天哦</a-typography-text
          >
        </p>
        <a-typography-text> 你想要借阅 &nbsp; </a-typography-text>
        <a-input-number
          id="inputNumber"
          v-model:value="borrowBookParam.borrow_time"
          :min="1"
          :max="90"
          size="small"
        />
        &nbsp; 天
      </a-modal>
      <a-modal
        v-model:open="openReserve"
        title="你确定要预约这本书吗？"
        @ok="reserveBook"
        @cancel="closeReserveBook"
      >
        <p>
          <a-typography-text type="secondary"
            >最多只能借90天哦</a-typography-text
          >
        </p>
        <a-typography-text> 你想要借阅 &nbsp; </a-typography-text>
        <a-input-number
          id="inputNumber"
          v-model:value="reserveBookParam.borrow_time"
          :min="1"
          :max="90"
          size="small"
        />
        &nbsp; 天
      </a-modal>
    </div>
  </div>
</template>
<script>
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
  LeftOutlined,
  RightOutlined,
} from "@ant-design/icons-vue";
import { defineComponent } from "vue";
import { get, del, post, getBlob, tip, removeLocalToken, ddo } from "@/common";
import { reactive, ref } from "vue";
import moment from "moment";
export default defineComponent({
  components: {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
    LeftOutlined,
    RightOutlined,
  },
  setup() {
    const openDetail = ref(false);
    const openBorrow = ref(false);
    const openReserve = ref(false);
    const page = ref({
      pageNum: "1",
      pageSize: "12",
      book_name: "%%",
      author_name: "%%",
      label_name: "%%",
      class_name: "%%",
      isbn: "%%",
    });
    const pageParam = ref({
      total: 1,
    });
    const list = ref();
    const tagsAndClasses = ref({
      classListEntity: [],
      labelListEntity: [],
    });
    const searchValue = reactive({
      id: undefined,
      info: undefined,
    });
    var bookDetail = ref();
    var borrowBookParam = reactive({
      book_id: 0,
      book_num: 1,
      borrow_time: 1,
    });
    var reserveBookParam = reactive({
      book_id: 0,
      reserve_num: 1,
      borrow_time: 1,
    });
    const getBooksInfo = () => {
      post("/reader/get_booklist", page.value).then((res) => {
        console.log(res);

        pageParam.value.total = res.data.total;

        list.value = res.data.list.map((item) => {
          item.bookBaseInfo.publi_time = moment(
            item.bookBaseInfo.publi_time
          ).format("YYYY年MM月DD日");
          return item;
        });
      });
    };
    const openBookDetail = (book) => {
      openDetail.value = true;
      bookDetail.value = book;
      var n = bookDetail.value.bookBaseInfo.total_score;
      bookDetail.value.rate = Math.floor(n * 10) / 10;
    };
    const closeBookDetail = () => {
      openDetail.value = false;
      bookDetail = ref();
    };
    const openLeft = (id, isOut) => {
      if (isOut) {
        // 预约
        reserveBookParam.book_id = id;
        openReserve.value = true;
      } else {
        // 借阅
        borrowBookParam.book_id = id;
        openBorrow.value = true;
      }
    };
    const closeBorrowBook = () => {
      console.log("closeBorrowBook");
      borrowBookParam.book_id = 0;
      borrowBookParam.borrow_time = 1;
      openBorrow.value = false;
    };
    const closeReserveBook = () => {
      console.log("closeReserveBook");
      reserveBookParam.book_id = 0;
      reserveBookParam.reserve_num = 1;
      openReserve.value = false;
    };
    const borrowBook = () => {
      console.log(borrowBookParam);
      post("/reader/borrow_book", borrowBookParam).then(
        (res) => {
          console.log(res);
          tip.success(res.message);
          closeBorrowBook();
          init();
        },
        (error) => {
          tip.warn("库存不足！");
        }
      );
    };
    const reserveBook = () => {
      post("/reader/reserve_book", reserveBookParam).then(
        (res) => {
          tip.success(res.message);
          closeReserveBook();
          init();
        },
        (error) => {
          tip.warn("库存不足！");
        }
      );
    };
    const getBookTagsAndClass = () => {
      console.log("getBookTags");
      get("/reader/get_all_label_class").then((res) => {
        tagsAndClasses.value = res.data;
        console.log(tagsAndClasses.value);
      });
    };
    const onSearch = () => {
      switch (searchValue.id) {
        case "0":
          page.value.book_name = !searchValue.info
            ? "%%"
            : "%" + searchValue.info + "%";
          break;
        case "1":
          page.value.author_name = !searchValue.info
            ? "%%"
            : "%" + searchValue.info + "%";
          break;
        case "2":
          page.value.isbn = !searchValue.info
            ? "%%"
            : "%" + searchValue.info + "%";
          break;
      }
      init(() => {
        page.value.author_name = "%%";
        page.value.isbn = "%%";
        page.value.book_name = "%%";
      });
    };
    const init = (cb) => {
      getBooksInfo();
      getBookTagsAndClass();
      cb && cb();
    };
    init();
    return {
      openDetail,
      openBorrow,
      openReserve,
      tagsAndClasses,
      page,
      list,
      bookDetail,
      borrowBookParam,
      reserveBookParam,
      searchValue,
      pageParam,
      openBookDetail,
      closeBookDetail,
      openLeft,
      closeBorrowBook,
      closeReserveBook,
      borrowBook,
      reserveBook,
      init,
      onSearch,
    };
  },
});
</script>
<style scoped>
:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  transition: ease all 0.3s;
  opacity: 0.5;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.7;
}
</style>
<style lang="scss">
.root {
  height: 80%;
  padding: 20px;
  .cardRow {
    .card {
      margin: 10px;
      .cart-text {
        overflow: hidden;
        width: 300px;
        .left {
          width: 100px;
        }
      }
    }
  }
  .pagination {
    padding: 10px;
    text-align: right;
  }
}
</style>